﻿.trans{transition: .3s; -webkit-transition: .3s;}
.wh100{display: block; width: 100%; height: 100%;}
.bac{background-position: 50% 50%; background-repeat: no-repeat;}
.in-ti{text-align: center; padding-top: 66px; margin-bottom: 58px;}
.in-ti.in-ti-gray h5{border-color: #d7d5d5 #cd1f1f #d7d5d5 #cd1f1f; color: #ffffff;}
.in-ti.in-ti-gray .en span{color: #fff;}
.in-ti:hover h5:before,
.in-ti:hover h5:after{width: 100%;}
.in-ti h5{width: 248px; line-height: 56px; height: 56px; font-size: 28px; margin: 0 auto 36px; color: #2f2f2f; letter-spacing: 3px; position: relative; cursor: default; border-color: #e6e6e6 #cd1f1f #e6e6e6 #cd1f1f; border-width: 1px; border-style: solid;}
.in-ti h5:before,
.in-ti h5:after{content: ''; position: absolute; transition: .3s; -webkit-transition: .3s; display: block; width: 68px; height: 1px; background-color: #cd1f1f;}
.in-ti h5:before{top: -1px; left: 0;}
.in-ti h5:after{bottom: -1px; right: 0;}
.in-ti .en{width: 710px; margin: auto; position: relative;}
.in-ti .en span{position: relative; font-size: 32px; text-transform: uppercase; display: inline-block; padding: 0 18px; line-height: 26px; height: 26px; z-index: 2; color: #504f4f;}
.in-ti .en .l1,
.in-ti .en .l2{display: block; width: 212px; height: 1px; position: absolute; top: 50%; background-color: #cccccc;}
.in-ti .en .l1{left: 0;}
.in-ti .en .l2{right: 0;}
.story{padding-bottom: 142px;}
.story .stor .txt{float: left; width: 644px; padding-top: 55px;}
.story .stor .txt .ti{line-height: 1; font-size: 26px; margin-bottom: 22px; color: #a81515;}
.story .stor .txt .intro{color: #393939; font-size: 16px; line-height: 31px;}
.story .stor .pic{float: right; width: 505px;}
.story .stor .pic video{width: 100%;}
.product{background: #161222 url("/template/default/images/pro.jpg") no-repeat center; height: 745px;}
.product .proList{overflow: hidden; margin-top: 90px;}
.product .proList .bd{position: relative; overflow: hidden; height: 370px;}
.product .proList .bd > a{display: inline-block; width: 62px; height: 66px; position: absolute; top: 50%; margin-top: -33px; background-position: 50% 50%; background-repeat: no-repeat; transition: .3s; -webkit-transition: .3s; background-color: rgba(255, 255, 255, 0.7);}
.product .proList .bd > a:hover{background-color: #ffffff;}
.product .proList .bd > a.prev{background-image: url("/template/default/images/pro-p.png"); left: 0;}
.product .proList .bd > a.next{background-image: url("/template/default/images/pro-n.png"); right: 0;}
.product .proList .bd li{float: left; width: 370px; height: 370px; position: relative; margin-right: 30px;background-color:#fff;}
.product .proList .bd li img{display: block; width: 100%; height: 100%;}
.product .proList .bd li .mask{position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; transition: .3s; -webkit-transition: .3s; opacity: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; letter-spacing: 2px; padding: 0 5px; overflow: hidden; font-size: 16px; text-align: center; line-height: 338px;}
.product .proList .bd li:hover .mask{opacity: 1;}

.zhongduan{background: #161222 url("/template/default/images/storesbg.jpg") no-repeat center; height: 822px;}
.zhongduan .proList{overflow: hidden; margin-top: 90px;}
.zhongduan .proList .bd{position: relative; overflow: hidden; height: 370px;}
.zhongduan .proList .bd > a{display: inline-block; width: 62px; height: 66px; position: absolute; top: 50%; margin-top: -33px; background-position: 50% 50%; background-repeat: no-repeat; transition: .3s; -webkit-transition: .3s; background-color: rgba(255, 255, 255, 0.7);}
.zhongduan .proList .bd > a:hover{background-color: #ffffff;}
.zhongduan .proList .bd > a.prev{background-image: url("/template/default/images/pro-p.png"); left: 0;}
.zhongduan .proList .bd > a.next{background-image: url("/template/default/images/pro-n.png"); right: 0;}
.zhongduan .proList .bd li{float: left; width: 370px; height: 370px; position: relative; margin-right: 30px;background-color:#fff;}
.zhongduan .proList .bd li img{display: block; width: 100%; height: 100%;}
.zhongduan .proList .bd li .mask{position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; transition: .3s; -webkit-transition: .3s; opacity: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; letter-spacing: 2px; padding: 0 5px; overflow: hidden; font-size: 16px; text-align: center; line-height: 338px;}
.zhongduan .proList .bd li:hover .mask{opacity: 1;}



.process{padding-top: 125px; padding-bottom: 95px;}
.process .cessTi{text-align: center; padding-top: 30px;  height: 133px; background: url("/template/default/images/processbg.png") no-repeat center;}
.process .cessTi h5{font-size: 28px; margin: 0 auto 15px; line-height: 1; color: #303030; letter-spacing: 3px;}
.process .cessTi p{font-size: 16px; color: #878787;}
.process .processWay{position: relative;}
.process .processWay:after{content: ''; display: block; background-color: #dfdfdf; height: 4px; width: 100%; position: absolute; top: 53px; left: 0;}
.process .processWay ul{position: relative; z-index: 5;}
.process .processWay li{width: 110px; float: left; cursor: default; margin-right: 71.66666667px; text-align: center;}
.process .processWay li:last-child{margin-right: 0;}
.process .processWay li .circle{background-position: 50% 50%; background-repeat: no-repeat; width: 110px;overflow: hidden; background-color: #cd1f1f; border-radius: 50%; margin-bottom: 15px; height: 110px;}
.process .processWay li .circle .child{background-position: 50% 50%; background-repeat: no-repeat;width: 100%; height: 100%;opacity: 0;transition: .3s;-webkit-transition: .3s;transform: scale(2);-webkit-transform: scale(2);}
.process .processWay li:hover .circle .child{transform: scale(1);-webkit-transform: scale(1); opacity: .5;}
.process .processWay li p{font-size: 14px; color: #676767;}
.stores{background: #161222 url("/template/default/images/storesbg.jpg") no-repeat center; height: 822px;}
.stores li{float: left; width: 295px; overflow: hidden; height: 236px; margin-left: 4px; margin-bottom: 4px;}
.stores li:hover img{transform: scale(1.08); -webkit-transform: scale(1.08);}
.stores li:nth-child(1){width: 599px; height: 477px; margin-left: 0;}
.stores li img{display: block; width: 100%; height: 100%; transition: .5s; -webkit-transition: .5s;}
.news{padding-bottom: 99px;}
.news .newsHot{float: left; width: 443px;}
.news .newsHot .time{font-size: 18px; margin-bottom: 6px; color: #9a9a9a;}
.news .newsHot .ti{line-height: 35px; font-size: 20px; margin-bottom: 11px; color: #282828;}
.news .newsHot .more{color: #525252; font-size: 12px; width: 143px; display: inline-block; text-transform: uppercase; background: url("/template/default/images/newsmore.png") no-repeat 86px 50%; transition: .3s; -webkit-transition: .3s;}
.news .newsHot .more:hover{color: #cd1f1f;}
.news .newsHot .pic{margin-top: 3px; position: relative;}
/* .news .newsHot .pic:before{content: ''; height: 32px; background-color: #fff; width: 146px; position: absolute; top: 0; left: 0;} */
.news .newsHot .pic img{width: 100%;}
.news .newsList{float: right; width: 676px;}
.news .newsList .bd{position: relative;}
.news .newsList .bd .moveLine{position: absolute; width: 100%; opacity: 0; height: 143px; border: 4px solid #cd1f1f; left: 3px; top: 0;}
.news .newsList .bd ul{position: relative; z-index: 10 ; padding-left: 28px;}
.news .newsList .bd ul li{height: 143px; border-top: 3px solid #e8e8e8; transition: .2s; -webkit-transition: .2s;}
.news .newsList .bd ul li.active,
.news .newsList .bd ul li:nth-of-type(1){border-color: transparent;}
.news .newsList .bd ul li:hover{border-color: transparent;}
.news .newsList .bd ul li:hover + li{border-color: transparent;}
.news .newsList .bd ul li:hover .more{background-image: url("/template/default/images/newsmore.png");}
.news .newsList .bd ul li > a{display: block; width: 100%; height: 100%; padding: 24px 20px 0 0 ;}
.news .newsList .bd ul li .time{font-size: 18px; margin-bottom: 10px; color: #9a9a9a;}
.news .newsList .bd ul li .ti{line-height: 25px; margin-bottom: 5px; font-size: 16px; color: #4e4e4e;}
.news .newsList .bd ul li .more{color: #525252; font-size: 12px; width: 143px; display: inline-block; text-transform: uppercase; background: url("/template/default/images/newsmoregray.png") no-repeat 86px 50%; transition: .3s; -webkit-transition: .3s;}
.news .newsList .bd ul li .more:hover{color: #525252;}
.contact{background-color: #fbfbfb; padding-bottom: 120px;}
.contact .bet{height: 405px;}
.contact .contactMap{width: 820px; height: 100%; background-color: #e4e1cf; float: left;}
.contact .add{width: 380px; background-color: #cd1f1f; height: 100%; float: left; padding: 57px 24px 0; color: #fff;}
.contact .add .ti{font-size: 24px; line-height: 1; font-weight: bold;}
.contact .add .ti .line{margin-top: 17px; height: 1px; background-color: #f48282; position: relative;}
.contact .add .ti .line span{width: 52px; height: 1px; position: absolute; top: 0; left: 0; background-color: #fff; display: inline-block;}
.contact .add .addMess{margin-top: 56px; font-size: 16px;}
.contact .add .addMess li{margin-bottom: 27px; line-height: 24px;}
.contact .add .addMess li label{vertical-align: middle;}
.contact .add .addMess li p{width: 230px;}

.processes{position: relative; height: 630px; background: url("/template/default/images/processesbg.jpg") no-repeat 120px 120px;}
.processes li{width: 123px; text-align: center; color: #3a3a3a; height: 137px; background: url("/template/default/images/cessborder.png") no-repeat center; position: absolute; transition: .3s; -webkit-transition: .3s;}
.processes li:hover{background-image: url("/template/default/images/cessborderh.png"); color: #fff;}
.processes li.li-1{top: 82px; left: 51px;}
.processes li.li-1:hover em{background-image: url("/template/default/images/cs-1-h.png");}
.processes li.li-1 em{background-image: url("/template/default/images/cs-1.png");}
.processes li.li-2{top: 73px; left: 366px;}
.processes li.li-2:hover em{background-image: url("/template/default/images/cs-2-h.png");}
.processes li.li-2 em{background-image: url("/template/default/images/cs-2.png");}
.processes li.li-3{top: 73px; left: 679px;}
.processes li.li-3:hover em{background-image: url("/template/default/images/cs-3-h.png");}
.processes li.li-3 em{background-image: url("/template/default/images/cs-3.png");}
.processes li.li-4{top: 73px; left: 993px;}
.processes li.li-4:hover em{background-image: url("/template/default/images/cs-4-h.png");}
.processes li.li-4 em{background-image: url("/template/default/images/cs-4.png");}
.processes li.li-5{top: 260px; left: 306px;}
.processes li.li-5:hover em{background-image: url("/template/default/images/cs-5-h.png");}
.processes li.li-5 em{background-image: url("/template/default/images/cs-5.png");}
.processes li.li-6{top: 260px; left: 626px;}
.processes li.li-6:hover em{background-image: url("/template/default/images/cs-6-h.png");}
.processes li.li-6 em{background-image: url("/template/default/images/cs-6.png");}
.processes li.li-7{top: 260px; left: 946px;}
.processes li.li-7:hover em{background-image: url("/template/default/images/cs-7-h.png");}
.processes li.li-7 em{background-image: url("/template/default/images/cs-7.png");}
.processes li.li-8{top: 388px; left: 20px;}
.processes li.li-8:hover em{background-image: url("/template/default/images/cs-8-h.png");}
.processes li.li-8 em{background-image: url("/template/default/images/cs-8.png");}
.processes li.li-9{top: 465px; left: 251px;}
.processes li.li-9:hover em{background-image: url("/template/default/images/cs-9-h.png");}
.processes li.li-9 em{background-image: url("/template/default/images/cs-9.png");}
.processes li.li-10{top: 465px; left: 527px;}
.processes li.li-10:hover em{background-image: url("/template/default/images/cs-10-h.png");}
.processes li.li-10 em{background-image: url("/template/default/images/cs-10.png");}
.processes li.li-11{top: 465px; left: 806px;}
.processes li.li-11:hover em{background-image: url("/template/default/images/cs-11-h.png");}
.processes li.li-11 em{background-image: url("/template/default/images/cs-11.png");}
.processes li.li-12{top: 426px; right: 12px;}
.processes li.li-12:hover em{background-image: url("/template/default/images/cs-12-h.png");}
.processes li.li-12 em{background-image: url("/template/default/images/cs-12.png");}
.processes li .cess{height: 100%; cursor: pointer; padding-top: 30px;}
.processes li em{display: block; height: 50px; margin-bottom: 8px; background-position: 50% 50%; background-repeat: no-repeat;}
.processes li p{line-height: 1; font-size: 16px;}
